<template>
  <div class="situation-page">
    <div class="page-header">
      <div>
        <el-radio-group @change="activeTypeChange" v-model="activeType">
          <el-radio-button label="1">个人党费统计</el-radio-button>
          <el-radio-button label="2">组织党费统计</el-radio-button>
        </el-radio-group>
      </div>
      <div>当前页面应缴合计：{{ currentPagePartyDuesDue }} 实缴合计：{{ currentPagePayPartyDues }}</div>
    </div>
    <div class="page-body">
      <div class="table-search">
        <el-form inline>
          <el-form-item label="党组织">
            <ClassifyTreeSelect
              @input="getBranchId"
              @getValue="getBranchNode"
              :value="queryParams.partyOrgId"
              size="mini"
            />
          </el-form-item>
          <el-form-item v-if="activeType==='1'" label="党员姓名">
            <el-input v-model="queryParams.name" size="mini" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="起止年月">
            <el-date-picker
              v-model="queryDate"
              value-format="yyyy-MM"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始年月"
              end-placeholder="结束年月"
              @change="queryDateChange"
            />
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" @click="search">搜索</el-button>
            <el-button size="mini" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-box">
        <el-table
          v-if="activeType==='1'"
          :data="tableData"
          height="100%"
        >
          <el-table-column align="center" type="index" label="序号" width="50" />
          <el-table-column prop="name" align="center" label="党员姓名" width="120" />
          <el-table-column prop="partyOrgName" align="center" label="所属组织" min-width="180" />
          <el-table-column prop="startAndEndDate" align="center" label="起止年月" width="240" />
          <el-table-column prop="partyDuesDue" align="center" label="应缴党费" width="180" />
          <el-table-column prop="payPartyDues" align="center" label="实缴党费" width="180" />
        </el-table>
        <el-table
          v-else
          :data="tableData"
          height="100%"
        >
          <el-table-column align="center" type="index" label="序号" width="50" />
          <el-table-column prop="partyOrgName" align="center" label="党组织名称" min-width="180" />
          <el-table-column prop="PartyMembersNumber" align="center" label="党员人数" width="120" />
          <el-table-column prop="startAndEndDate" align="center" label="起止年月" width="240" />
          <el-table-column prop="partyDuesDue" align="center" label="应缴党费" width="180" />
          <el-table-column prop="payPartyDues" align="center" label="实缴党费" width="180" />
        </el-table>
      </div>
      <pagination
        :total="total"
        :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize"
        @pagination="getData"
      />
    </div>
  </div>
</template>
<script>
import ClassifyTreeSelect from '@/components/classifyTree/classifyTreeSelect.vue'
import { statisticsPerson, statisticsOrganize } from '@/api/cadreBusiness/feeStatistics'
export default {
  components: { ClassifyTreeSelect },
  data () {
    return {
      activeType: '1',
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        partyOrgId: '',
        name: '',
        startDate: '',
        endDate: ''
      },
      total: 0,
      currentPagePartyDuesDue: 0,
      currentPagePayPartyDues: 0,
      queryDate: [],
      tableData: [],
      multipleSelection: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    search () {
      this.queryParams.pageNo = 1
      this.getData()
    },
    getData () {
      let queryData = statisticsPerson
      if (this.activeType === '2') {
        queryData = statisticsOrganize
      }
      queryData(this.queryParams).then((res) => {
        this.tableData = res?.data?.records || []
        this.total = res?.data?.total || 0
        this.currentPagePartyDuesDue = res?.data?.records?.[0]?.currentPagePartyDuesDue || 0
        this.currentPagePayPartyDues = res?.data?.records?.[0]?.currentPagePayPartyDues || 0
      })
    },
    reset () {
      this.queryParams.partyOrgId = ''
      this.queryParams.name = ''
      this.queryParams.startDate = ''
      this.queryParams.endDate = ''
      this.queryDate = []
      this.search()
    },
    getBranchNode (node) {
      this.queryParams.partyOrgId = node?.id || null
      // this.queryParams.partyOrgName = node?.fullNamePartyOrg || null
    },
    getBranchId (id) {
      // console.log('id', id)
    },
    queryDateChange (val) {
      this.queryParams.startDate = val[0]
      this.queryParams.endDate = val[1]
    },
    activeTypeChange () {
      this.queryParams.name = ''
      this.search()
    }
  }
}
</script>
<style scoped lang="scss">
.page-header {
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  padding-left: 8px;
  padding-right: 8px;
}
.page-body {
  padding-top: 16px;
  // .table-search {
  //   display: flex;
  //   justify-content: space-between;
  // }
  .table-box {
    height: calc(100vh - 280px);
    .click-span {
      cursor: pointer;
      color: #409EFF;
    }
  }
}

</style>
